<template>
<a-row :gutter="[16, 16]">
    <a-col :span="24">
        <a-card>
            <a-form>
                <a-row :gutter="[16, 16]">
                    <a-col :lg="6" :md="12" :sm="24" v-for="item in searcher" :key="item.dataIndex">
                        <a-form-item :label="item.title">
                            <a-select v-if="item.type ==='Array'" v-model:value="where[item.dataIndex]" :options="item.options">
                            </a-select>
                            <a-range-picker v-else-if="item.type ==='Date'" v-model:value="where[item.dataIndex]">
                            </a-range-picker>
                            <a-input v-else v-model:value="where[item.dataIndex]">
                            </a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :lg="6" :md="12" :sm="24">
                        <a-form-item>
                            <a-space>
                                <a-button type="primary"> 查询 </a-button>
                                <a-button v-if="columnsComputed.length > 3" @click="isMore = !isMore">
                                    更多
                                </a-button>
                            </a-space>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-card>
    </a-col>
    <a-col :span="24">
        <a-card>
            <a-row :gutter="[16, 16]">
                <a-col :span="12">
                    <slot name="toolbar"></slot>
                </a-col>
                <a-col :span="12" style="text-align: right">
                    <slot name="toolkit">
                        <a-space>
                            <a-button>设置</a-button>
                        </a-space>
                    </slot>
                </a-col>
                <a-col :span="24">
                    <a-table :columns="columns" :dataSource="dataSource" :rowSelection="rowSelection" v-bind="attrs">
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.key == 'action'">
                                <a-space>
                                    <a v-for="action in actions" :key="action.id" v-bind="{
                                                ...action.attrs,
                                                class: [
                                                    action.type === 'danger' &&
                                                        'ml-a-danger',
                                                ],
                                            }" @click="itemClick(action, record)">
                                        {{ action.title }}
                                    </a>
                                </a-space>
                            </template>
                        </template>
                    </a-table>
                </a-col>
            </a-row>
        </a-card>
    </a-col>

    <slot name="editor"></slot>
</a-row>
</template>

<script lang="ts">
import {
    computed,
    defineComponent,
    onMounted,
    PropType,
    ref
} from "vue";
import {
    reloadApi
} from "@/api/table/index";
import {
    TableColumnsType
} from "ant-design-vue";

interface ColumnType extends TableColumnsType {
    isSearch: boolean;
}

export default defineComponent({
    emits: ["update:selection"],
    props: {
        where: Object,
        columns: Object as PropType < ColumnType[] > ,
        selection: Array,
        current: Object,
        rowSelection: Object,
        url: {
            type: String,
            required: true,
        },
        actions: Array,
    },
    setup(props, {
        emit,
        attrs
    }) {
        // 是否查询更多
        const isMore = ref(false);
        // 数据源
        const dataSource = ref([]);
        const columnsComputed = computed(() => {
            if (!props.columns) {
                return [];
            }

            return props.columns.filter((c) => c.isSearch);
        });

        // 查询器
        const searcher = computed(() => {
            if (!props.columns) {
                return [];
            }

            return columnsComputed.value.length <= 3 || isMore.value ?
                columnsComputed.value :
                columnsComputed.value.slice(0, 3);
        });

        // 选择改变
        const onSelectChange = (changableRowKeys: string[]) => {
            emit("update:selection", changableRowKeys);
        };

        // 选择器配置
        const rowSelection = computed(() => {
            if (props.selection || props.current) {
                return {
                    type: props.selection ? "checkbox" : "radio",
                    selectedRowKeys: props.selection,
                    onChange: onSelectChange,
                    ...props.rowSelection,
                };
            }

            return null;
        });

        // 数据加载
        const reload = () => {
            reloadApi(props.url, props.where).then((res) => {
                dataSource.value = res.data;
            });
        };

        // 生命周期
        onMounted(() => {
            reload();
        });

        // 单行点击事件
        const itemClick = function (aciton: any) {
            let func = aciton.event["onClick"];

            if (typeof func !== "function") {
                console.error("func is not Funciton");
                return;
            }

            const arg = Array.prototype.slice.call(arguments);

            func(...arg.slice(1));
        };

        return {
            reload,
            dataSource,
            columnsComputed,
            isMore,
            searcher,
            rowSelection,
            attrs,
            itemClick,
        };
    },
});
</script>
